<template>
  <div class="dt-chat-groups">
    <div class="dt-groups-title">
      <span>消息</span>
      <el-dropdown trigger="click" placement="bottom-start" @command="addGroupMenu">
        <span class="el-dropdown-link">
          <i class="el-icon-plus"></i>
        </span>
        <el-dropdown-menu slot="dropdown" class="dt-caht-addGroup">
          <el-dropdown-item command="1">单一群聊</el-dropdown-item>
          <el-dropdown-item command="2">高级群聊</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <div class="dt-groups-list" ref="scrollChat">
      <div class="dt-groups-loading" v-if="loading.groupList"><i class="el-icon-loading"></i> <span>加载中，请稍后</span></div>
      <div v-else>
        <div class="dt-list-items" v-for="(item, index) in GroupListTop" :key="item.groupId" :ref="item.groupId + '-' + index">
          <div
            :class="['dt-list-item', { on: query.groupId == item.groupId }]"
            @click="goGroupChat(item)"
            v-if="item.noticeType != 3"
            @contextmenu.prevent.stop="rightToTop($event, item, index)"
          >
            <img :src="messTypeUrl[item.noticeType]" alt="图像的描述" />
            <img src="/skb/img/ic_zd16.png" alt="图像的描述" width="16px" height="16px" class="dt-list-item-topicon" />
            <div class="dt-item-des">
              <div class="dt-des-chatname">
                <span>{{ item.groupName }}</span>
                <i>{{ item.createTimestamp | filterTimeStamp }}</i>
              </div>
              <div class="dt-des-chattip">
                <div
                  class="dt-des-markdup"
                  v-html="'[' + (item.unreadCount > 999 ? '999+' : item.unreadCount) + '条]' + getemojiText(item.shortMessage)"
                  v-if="item.noDisturb == 1 && item.unreadCount > 0 && item.noticeType == 1"
                ></div>
                <div
                  class="dt-des-markdup"
                  v-html="getemojiText(item.shortMessage)"
                  v-if="item.noDisturb == 0 || (item.noDisturb == 1 && item.unreadCount == 0)"
                ></div>
                <!-- <em v-if="item.unreadCount!=0">{{item.unreadCount>99?'99+':item.unreadCount}}</em> -->
                <div v-if="item.noDisturb == 1">
                  <img src="/skb/img/ic_mdr12.png" alt="消息免打扰" />
                </div>
                <el-badge v-if="item.unreadCount != 0 && item.noDisturb == 0" :value="item.unreadCount" :max="99" class="item"></el-badge>
              </div>
            </div>
            <div class="contextMenu" v-show="item.isShowMenu && item.noticeType != 2">
              <div @click="pinToTop($event, item)">取消置顶</div>
              <div @click="enableDoNotDisturb($event, item)">{{ item.noDisturb == '1' ? '开启消息提醒' : '消息免打扰' }}</div>
              <div @click="delGroup(item)" v-if="item.isDel == 2">删除群聊</div>
            </div>
          </div>
          <div class="dt-list-gj-content" :ref="item.groupId" v-else>
            <div class="dt-list-item-gj" @click="showTree(item)" @contextmenu.prevent.stop="rightToTop($event, item, index)">
              <img :src="messTypeUrl[item.noticeType]" alt="图像的描述" />
              <img src="/skb/img/ic_zd16.png" alt="图像的描述" width="16px" height="16px" class="dt-list-item-topicon" />
              <div class="dt-list-item-gj-name">{{ item.groupName }}</div>
              <div class="dt-list-item-gj-unreadCount">
                <el-badge v-if="item.rootUnreadCount != 0" :value="item.rootUnreadCount" :max="99" class="item"></el-badge>
                <!-- <em v-if="item.rootUnreadCount!=0">{{item.rootUnreadCount>99?'99+':item.rootUnreadCount}}</em> -->
              </div>
            </div>
            <el-tree
              :data="item.children"
              :props="defaultProps"
              @node-click="handleNodeClick"
              :default-expand-all="true"
              v-show="item.isShowTree"
              :expand-on-click-node="false"
              node-key="groupId"
              :ref="item.groupId"
            >
              <div class="custom-tree-node" slot-scope="{ node, data }" :disabled="isNodeDisabled(data)">
                <span>{{ node.label }} </span>
                <div class="dt-list-item-gj-unreadCount">
                  <!-- <em v-if="data.unreadCount!=0">{{data.unreadCount>99?'99+':data.unreadCount}}</em> -->
                  <el-badge v-if="data.unreadCount != 0" :value="data.unreadCount" :max="99" class="item"></el-badge>
                </div>
              </div>
            </el-tree>
            <div class="contextMenu" v-show="item.isShowMenu && item.noticeType != 2">
              <div @click="pinToTop($event, item)">取消置顶</div>
            </div>
          </div>
        </div>
        <div class="dt-list-items" v-for="(item, index) in GroupListBottom" :key="item.groupId" :ref="item.groupId + '-' + index">
          <div
            :class="['dt-list-item', { on: query.groupId == item.groupId }]"
            @click="goGroupChat(item)"
            v-if="item.noticeType != 3"
            @contextmenu.prevent.stop="rightToTop($event, item, index)"
          >
            <img :src="messTypeUrl[item.noticeType]" alt="图像的描述" />
            <div class="dt-item-des">
              <div class="dt-des-chatname">
                <span>{{ item.groupName }}</span>
                <i>{{ item.createTimestamp | filterTimeStamp }}</i>
              </div>
              <div class="dt-des-chattip">
                <div
                  class="dt-des-markdup"
                  v-html="'[' + (item.unreadCount > 999 ? '999+' : item.unreadCount) + '条]' + getemojiText(item.shortMessage)"
                  v-if="item.noDisturb == 1 && item.unreadCount > 0 && item.noticeType == 1"
                ></div>
                <div
                  class="dt-des-markdup"
                  v-html="getemojiText(item.shortMessage)"
                  v-if="item.noDisturb == 0 || (item.noDisturb == 1 && item.unreadCount == 0)"
                ></div>
                <!-- <em v-if="item.unreadCount!=0">{{item.unreadCount>99?'99+':item.unreadCount}}</em> -->
                <div v-if="item.noDisturb == 1 && item.noticeType == 1">
                  <img src="/skb/img/ic_mdr12.png" alt="消息免打扰" />
                </div>
                <el-badge v-if="item.unreadCount != 0 && item.noDisturb == 0" :value="item.unreadCount" :max="99" class="item"></el-badge>
              </div>
            </div>
            <div class="contextMenu" v-show="item.isShowMenu && item.noticeType != 2">
              <div @click="pinToTop($event, item)">置顶群聊</div>
              <div @click="enableDoNotDisturb($event, item)">{{ item.noDisturb == '1' ? '开启消息提醒' : '消息免打扰' }}</div>
              <div @click="delGroup(item)" v-if="item.isDel == 2">删除群聊</div>
            </div>
          </div>
          <div class="dt-list-gj-content" :ref="item.groupId" v-else>
            <div class="dt-list-item-gj" @click="showTree(item)" @contextmenu.prevent.stop="rightToTop($event, item, index)">
              <img :src="messTypeUrl[item.noticeType]" alt="图像的描述" />
              <div class="dt-list-item-gj-name">{{ item.groupName }}</div>
              <div class="dt-list-item-gj-unreadCount">
                <el-badge v-if="item.rootUnreadCount != 0" :value="item.rootUnreadCount" :max="99" class="item"></el-badge>
                <!-- <em v-if="item.rootUnreadCount!=0">{{item.rootUnreadCount>99?'99+':item.rootUnreadCount}}</em> -->
              </div>
            </div>
            <el-tree
              :data="item.children"
              :props="defaultProps"
              @node-click="handleNodeClick"
              :default-expand-all="true"
              v-show="item.isShowTree"
              :expand-on-click-node="false"
              node-key="groupId"
              :ref="item.groupId"
            >
              <div class="custom-tree-node" slot-scope="{ node, data }" :disabled="isNodeDisabled(data)">
                <span>{{ node.label }} </span>
                <div class="dt-list-item-gj-unreadCount">
                  <!-- <em v-if="data.unreadCount!=0">{{data.unreadCount>99?'99+':data.unreadCount}}</em> -->
                  <el-badge v-if="data.unreadCount != 0" :value="data.unreadCount" :max="99" class="item"></el-badge>
                </div>
              </div>
            </el-tree>
            <div class="contextMenu" v-show="item.isShowMenu && item.noticeType != 2">
              <div @click="pinToTop($event, item)">置顶群聊</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 创建群聊 -->
    <el-dialog
      class="dt-add-group"
      title="创建群聊"
      :visible.sync="addGroupIsShow"
      :append-to-body="true"
      width="560px"
      :show-close="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
    >
      <el-form
        :model="addGroupForm"
        :rules="addGroupRules"
        ref="addGroupValidateForm"
        label-position="left"
        label-width="82px"
        size="medium"
        @submit.native.prevent
      >
        <el-form-item label="群名称" prop="groupName">
          <el-input type="text" placeholder="请输入群名称" v-model="addGroupForm.groupName" maxlength="20" show-word-limit> </el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input type="textarea" placeholder="请输入群简介" v-model="addGroupForm.briefIntroduction" rows="4" maxlength="500" show-word-limit>
          </el-input>
        </el-form-item>
        <el-form-item label="成员确认" prop="groupRule">
          <el-switch v-model="addGroupForm.groupRuleSetting"> </el-switch>
          <span class="dt-group-tip">开启成员确认后，群成员需同意群规才能进入群聊</span>
        </el-form-item>
        <el-form-item label="群规则内容" prop="groupRule" v-show="addGroupForm.groupRuleSetting">
          <el-input type="textarea" placeholder="请输入群规则" v-model="addGroupForm.groupRule" rows="5" maxlength="500" show-word-limit> </el-input>
        </el-form-item>
        <el-form-item label="添加附件" v-show="addGroupForm.groupRuleSetting">
          <el-upload
            ref="uploadRef1"
            action="#"
            :http-request="httpRequest"
            :show-file-list="false"
            :limit="1"
            :on-exceed="handleExceed"
            :disabled="hasFile"
            :accept="'.jpg,.jpeg,.png,,.pdf,.doc,.docx,.xls,.xlsx'"
            :before-upload="beforeAvatarUpload"
          >
            <div class="upload-box">
              <div class="btn" :class="{ hasFile: hasFile }"><i class="el-icon-upload2"></i>添加附件</div>
              <div class="tip">仅能上传1个附件，单个文件小于10M</div>
            </div>
          </el-upload>
          <div class="upload-info" v-if="hasFile">
            <span class="name"><img src="/skb/img/file/file.png" alt="" />{{ addGroupForm.groupRuleAnnex[0].folderName }}</span>
            <span class="btn" @click="delFile">删除</span>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="medium" type="primary" @click="submitFormAddGroup('addGroupValidateForm')" :loading="loading.addGroup">创建群聊</el-button
        ><el-button class="dt-add-group-cancel" size="medium" @click="resetFormAddGroup('addGroupValidateForm')">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
/*  获取年月日时分秒 */
const getDateFormatString = function (type, timestamp) {
  var date = timestamp ? new Date(timestamp) : new Date(),
    dateStr = ''
  var y = date.getFullYear()
  var m = date.getMonth() + 1
  m = m < 10 ? '0' + m : m
  var d = date.getDate()
  d = d < 10 ? '0' + d : d
  var h = date.getHours()
  h = h < 10 ? '0' + h : h
  var min = date.getMinutes()
  min = min < 10 ? '0' + min : min
  var s = date.getSeconds()
  s = s < 10 ? '0' + s : s
  switch (type) {
    case 'md':
      dateStr = m + '-' + d
      break
    case 'mdhms':
      dateStr = m + '-' + d + ' ' + h + ':' + min + ':' + s
      break
    case 'ymd':
      dateStr = y + '-' + m + '-' + d
      break
    case 'ymdhms':
      dateStr = y + '-' + m + '-' + d + ' ' + h + ':' + min + ':' + s
      break
    default:
      dateStr = y + '' + m + '' + d + '' + h + '' + min + '' + s
      break
  }
  return dateStr
}
/* 获取格式化的时间戳（距离当前时间有多久） */
const getChatTimeString = function (timestamp) {
  var currDate = new Date(),
    currTimestamp = currDate.getTime(),
    timeLong = currTimestamp - timestamp,
    timeStr = ''
  if (timeLong <= 60 * 1000) {
    timeStr = '刚刚'
  } else if (timeLong > 60 * 1000 && timeLong <= 2 * 60 * 1000) {
    timeStr = '1分钟前'
  } else if (timeLong > 2 * 60 * 1000 && timeLong <= 60 * 60 * 1000) {
    var min = Math.floor(timeLong / 1000 / 60)
    timeStr = min + '分钟前'
  } else if (timeLong > 60 * 60 * 1000 && timeLong <= 24 * 60 * 60 * 1000) {
    var min = Math.floor(timeLong / 1000 / 60 / 60)
    timeStr = min + '小时前'
  } else if (timeLong > 24 * 60 * 60 * 1000) {
    var currYear = currDate.getFullYear(),
      timeYear = new Date(timestamp).getFullYear()
    if (currYear === timeYear) {
      //今年内
      timeStr = getDateFormatString('mdhms', timestamp)
    } else {
      //跨年
      timeStr = getDateFormatString('ymdhms', timestamp)
    }
  }
  return timeStr
}
export default {
  data() {
    return {
      uid: this.$tools.getDecrypt(this.$store.state.uid),
      addGroupIsShow: false,
      addGroupForm: {
        groupRuleAnnex: [],
        groupName: '',
        briefIntroduction: '',
        groupRule:
          '1.尊重法律：遵守国家法律法规，不发布违法信息。\n2.维护秩序：保持群内讨论积极健康，避免敏感和不当话题。\n3.保护隐私：不泄露公司或个人敏感信息。\n4.文明交流：使用礼貌用语，尊重他人，避免冲突。\n5.遵守纪律：群管理员有权管理群聊，违规者将受到警告或移除。',
        groupRuleSetting: true
      },
      addGroupRules: {
        groupName: [{ required: true, message: '请输入群名称', trigger: 'blur' }]
        // groupRule: [{ required: true, message: '请设置群规', trigger: 'blur' }]
      },
      GroupList: [],
      GroupListTop: [],
      GroupListBottom: [],
      unReadList: [],
      messTypeUrl: [null, '/skb/img/chat-mess.png', '/skb/img/chat-sys.png', '/skb/img/ic_gjql.png'],
      defaultProps: {
        children: 'children',
        label: 'groupName'
      },
      loading: {
        groupList: true,
        addGroup: false
      },
      /***************消息提示*****************************/
      msgTime: 0,
      msgTitle: '数科帮网页版',
      msgTimer: null,
      groupName: ''
    }
  },
  computed: {
    query() {
      return this.$tools.getQuery(this)
    },
    hasFile() {
      if (this.addGroupForm.groupRuleAnnex && this.addGroupForm.groupRuleAnnex.length) return true
      else return false
    }
  },
  filters: {
    // filterPureUserName(val) {
    //   return val.length > 3 ? val.substring(0, 3) + '...' : val
    // },
    filterTimeStamp(val) {
      return getChatTimeString(new Date(val).getTime())
    }
    // filterMemberName(val) {
    //   return val.length > 7 ? val.substring(0, 7) + '...' : val
    // }
  },
  methods: {
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10
      if (!isLt2M) {
        this.$message.error('上传文件大小不能超过 10MB!')
        this.addGroupForm.groupRuleAnnex = []
      }
      return isLt2M
    },
    delFile() {
      this.$refs.uploadRef1.clearFiles()
      this.addGroupForm.groupRuleAnnex = []
    },
    httpRequest(req) {
      this.$tools.getStsClient(this, req.file, (state, client, bucketName, file) => {
        if (state) {
          this.uploadFileAnnex(client, bucketName, file)
        }
      })
    },
    uploadFileAnnex(client, bucketName, file) {
      this.loading.addGroup = true
      var time = new Date().getTime() + '',
        key = time.split('').reverse().join('') + this.$tools.getRandomName(file)
      var params = {
        Body: file,
        Bucket: bucketName,
        Key: key,
        ContentDisposition: `attachment; filename="${encodeURIComponent(file.name)}"`
      }
      client
        .putObject(params, (err, data) => {
          if (err) {
          } else {
            this.onSuccess(file, key)
          }
        })
        .on('httpUploadProgress', (progress) => {
          // this.onProgress(progress, file)
        })
    },
    onSuccess(file, key) {
      let pos = file.name.lastIndexOf('.')
      let suffix = file.name.substring(pos + 1)
      this.addGroupForm.groupRuleAnnex = [
        {
          fileKey: key,
          fileUrl: 'https://www.ccccdt.com/ccccdt/' + key,
          folderName: file.name,
          fileSuffix: suffix,
          fileType: 6,
          fileSize: file.size,
          createUid: this.uid
        }
      ]
      console.log('onSuccess============', this.addGroupForm, file)
      this.loading.addGroup = false
    },
    handleExceed(files, fileList) {
      this.$message.warning(`最多添加1个附件`)
    },
    //获取新消息提示权限
    addGroupMenu(command) {
      // console.log(command)
      if (command == '1') {
        this.addGroup()
      } else if (command == '2') {
        this.$router.push('/main/#/pc?tab=org&elTab=0')
      }
    },
    // 显示创建单一群聊输入框
    addGroup() {
      this.addGroupIsShow = true
    },
    // 提交创建群聊
    submitFormAddGroup(formName) {
      this.$refs[formName].validate((valid) => {
        console.log('submitFormAddGroupsubmitFormAddGroupsubmitFormAddGroup', valid)
        if (valid) {
          this.loading.addGroup = true
          this.createGroup()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 取消创建群聊 然后重置参数
    resetFormAddGroup(formName) {
      this.$refs[formName].resetFields()
      this.addGroupForm.groupRuleAnnex = []
      this.addGroupForm.briefIntroduction = ''
      this.$refs.uploadRef1.clearFiles()
      this.addGroupIsShow = false
      this.addGroupForm.groupRuleSetting = true
      this.addGroupForm.groupRule =
        '1.尊重法律：遵守国家法律法规，不发布违法信息。\n2.维护秩序：保持群内讨论积极健康，避免敏感和不当话题。\n3.保护隐私：不泄露公司或个人敏感信息。\n4.文明交流：使用礼貌用语，尊重他人，避免冲突。\n5.遵守纪律：群管理员有权管理群聊，违规者将受到警告或移除。'
    },
    // 发送创建单一群聊请求
    createGroup() {
      var data = [
          {
            userId: this.uid,
            groupName: this.addGroupForm.groupName,
            briefIntroduction: this.addGroupForm.briefIntroduction,
            groupRule: this.addGroupForm.groupRule,
            groupRuleSetting: this.addGroupForm.groupRuleSetting ? 1 : 0,
            groupRuleAnnex: JSON.stringify(this.addGroupForm.groupRuleAnnex),
            groupRuleAnnexChange: true
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/createSingleGroup'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.addGroupIsShow = false
              this.loading.addGroup = false
              this.$message({
                message: '创建成功',
                type: 'success',
                duration: 2000,
                onClose: () => {
                  this.$emit('getGroupInfo')
                  // this.chatListNoticeTop(data.data)
                  // this.goGroupChat({ group_id: data.data.group_id })
                  this.addGroupForm.groupRuleAnnex = []
                  this.$refs.uploadRef1.clearFiles()
                  this.addGroupForm.groupName = ''
                  this.addGroupForm.briefIntroduction = ''
                  this.addGroupForm.groupRuleSetting = true
                  this.addGroupForm.groupRule =
                    '1.尊重法律：遵守国家法律法规，不发布违法信息。\n2.维护秩序：保持群内讨论积极健康，避免敏感和不当话题。\n3.保护隐私：不泄露公司或个人敏感信息。\n4.文明交流：使用礼貌用语，尊重他人，避免冲突。\n5.遵守纪律：群管理员有权管理群聊，违规者将受到警告或移除。'
                }
              })
              this.$nextTick(() => {
                this.$socket.emit('leaveGroup', 'group-' + this.query.groupId)
                this.$router.push('/main/#/pc?tab=chat&groupId=' + data.data.groupId)
                this.$socket.emit('joinGroup', 'group-' + data.groupId)
              })
            } else {
              this.loading.addGroup = false
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    // 获取所有的群聊列表
    getGroupList() {
      var data = [
          {
            userId: this.uid
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/groupListWithTop'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              //               GroupListTop: [],
              // GroupListBottom: [],
              // 使用forEach方法来给每个对象添加新属性
              data.data.topList.forEach((obj) => {
                obj.isShowTree = false // 给每个对象添加新属性
                // 是否显示右键菜单
                obj.isShowMenu = false
              })
              data.data.bottomList.forEach((obj) => {
                obj.isShowTree = false // 给每个对象添加新属性
                // 是否显示右键菜单
                obj.isShowMenu = false
              })
              this.GroupListTop = data.data.topList
              this.GroupListBottom = data.data.bottomList
              // this.GroupList = data.data
              this.loading.groupList = false
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    // 有未读消息的所有群
    getAllUnreadList() {
      var data = [
          {
            userId: this.uid
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/allUnreadGroupList'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              this.unReadList = data.data
              if (window.electron) {
                window.electron.ipcRenderer.send('electron:say', this.unReadList)
              }
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    //进入群聊
    goGroupChat(item) {
      this.$socket.emit('leaveGroup', 'group-' + this.query.groupId)
      this.$router.push('/main/#/pc?tab=chat&groupId=' + item.groupId)
      this.$socket.emit('joinGroup', 'group-' + item.groupId)
      // this.GroupList.forEach((item) => {
      //   // this.$set(item, 'isShowMenu', false)
      //   item.isShowMenu = false
      // })
      this.GroupListTop.forEach((item) => {
        item.isShowMenu = false
      })
      this.GroupListBottom.forEach((item) => {
        item.isShowMenu = false
      })
    },
    handleNodeClick(data) {
      if (data.userInGroup == 1) {
        this.$socket.emit('leaveGroup', 'group-' + this.query.groupId)
        this.$router.push('/main/#/pc?tab=chat&groupId=' + data.groupId)
        this.$socket.emit('joinGroup', 'group-' + data.groupId)
      } else {
        return
      }
    },
    showTree(item) {
      var isShowTree = !item.isShowTree
      if (isShowTree) {
        var data = [
            {
              userId: this.uid,
              groupId: item.groupId
            }
          ],
          domain = [this.$store.state.DOMAIN],
          path = ['/project/customGroup/groupListSubTree'],
          dataAxios = this.$tools.getDataAxios(this, domain, path, data)
        Promise.all(dataAxios)
          .then((response) => {
            this.$tools.callbackAxios(this, response, (response) => {
              var data = response[0].data
              if (data.code === 200) {
                item.children = [data.data]
                item.isShowTree = !item.isShowTree
              } else {
                this.$message({
                  message: data.message,
                  type: 'warning',
                  duration: 2000,
                  onClose: () => {}
                })
              }
            })
          })
          .catch((error) => {})
      } else {
        item.children = []
        if (item.children.length == 0) {
          item.isShowTree = !item.isShowTree
        }
      }
    },
    // 新建的群聊往数组的头部插入让他显示在最上面
    // chatListNoticeTop(data) {
    //   this.GroupList.forEach((item, index) => {
    //     if (item.groupId == data.groupId) {
    //       item.shortMessage = data.shortMessage
    //       item.createTimestamp = data.createTimestamp
    //       item.unreadCount = data.unreadCount
    //     }
    //   })
    //   let _index = this.GroupList.findIndex((obj) => obj.groupId === data.groupId)
    //   // 检查是否找到了对象，并输出结果
    //   if (_index === -1) {
    //     this.GroupList.unshift(data)
    //   } else {
    //     var _item = this.GroupList.splice(_index, 1)
    //     this.GroupList.unshift(_item[0])
    //   }
    // },
    // 删除群聊
    delGroup(item) {
      var data = [
          {
            userId: this.uid,
            groupId: item.groupId
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/deleteCustomGroup'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    // 删除群聊
    deleteCustomGroup(data) {
      console.log(data)
      let itemToRemove = null
      let targetArray = null
      // 在GroupListTop中查找groupId
      const indexInTop = this.GroupListTop.findIndex((obj) => obj.groupId === data.groupId)
      if (indexInTop !== -1) {
        itemToRemove = this.GroupListTop[indexInTop]
        targetArray = this.GroupListTop
      } else {
        // 如果在GroupListTop中没有找到，则在GroupListBottom中查找
        const indexInBottom = this.GroupListBottom.findIndex((obj) => obj.groupId === data.groupId)
        if (indexInBottom !== -1) {
          itemToRemove = this.GroupListBottom[indexInBottom]
          targetArray = this.GroupListBottom
        }
      }
      // 如果在任何一个数组中找到了元素，则删除它
      if (itemToRemove) {
        targetArray.splice(targetArray.indexOf(itemToRemove), 1)
      } else {
        // 如果没有找到，重新获取GroupList
        this.getGroupList()
      }
      // 跳转到指定路由
      this.$router.push('/main/#/pc?tab=chat')
    },
    // 动态判断节点是否应该被禁用的函数
    isNodeDisabled(data, node) {
      // console.log(data)
      // 根据节点数据或其它逻辑来返回 true 或 false
      // 例如，以下代码表示如果节点数据中的 disabled 属性为 true，则禁用该节点
      if (data.userInGroup == 1) {
        return false
      } else {
        return true
      }
    },
    /**
     * 右键置顶
     */
    rightToTop(e, item, index) {
      e.preventDefault() // 阻止默认的右键菜单
      this.$nextTick(() => {
        this.GroupListTop.forEach((item) => {
          item.isShowMenu = false
        })
        this.GroupListBottom.forEach((item) => {
          item.isShowMenu = false
        })
        // 设置菜单的位置
        item.isShowMenu = true
        const refList = this.$refs[item.groupId + '-' + index]
        if (!refList || refList.length === 0) {
          console.error('No elements found for ref:', item.groupId)
          return
        }
        var menuNode = refList[0].querySelector('.contextMenu')
        if (!menuNode) {
          console.error('No contextMenu found within ref:', item.groupId)
          return
        }
        // 使用requestAnimationFrame确保在下次重绘之前获取高度
        requestAnimationFrame(() => {
          // console.log(menuNode.offsetHeight) // 现在应该能获取到正确的高度
          // 视口高度
          const viewportHeight = window.innerHeight
          // 获取鼠标点击位置相对于视口的坐标
          const clientX = e.clientX
          const clientY = e.clientY
          // 获取div的偏移量
          const rect = refList[0].getBoundingClientRect()
          const offsetX = clientX - rect.left
          const offsetY = clientY - rect.top
          if (offsetX + 120 > 260) {
            menuNode.style.left = offsetX - 122 + 'px'
          } else {
            menuNode.style.left = offsetX + 2 + 'px'
          }
          if (clientY + menuNode.offsetHeight > viewportHeight) {
            menuNode.style.top = offsetY - menuNode.offsetHeight + 'px'
          } else {
            menuNode.style.top = offsetY + 2 + 'px'
          }
        })
      })
    },
    /**
     * 置顶函数
     */
    pinToTop(e, item) {
      e.stopPropagation()
      var data = [
          {
            userId: this.uid,
            type: item.toTop == 0 ? 1 : 0,
            groupId: item.groupId
          }
        ],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/groupToTop'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              item.isShowMenu = false
              this.$message({
                message: data.message,
                type: 'success',
                duration: 1500,
                onClose: () => {}
              })

              if (this.query.groupId) {
                this.$emit('getMoreGroupInfo')
              }

              // //               GroupListTop: [],
              // // GroupListBottom: [],
              // // 使用forEach方法来给每个对象添加新属性
              // data.data.topList.forEach((obj) => {
              //   obj.isShowTree = false // 给每个对象添加新属性
              //   // 是否显示右键菜单
              //   obj.isShowMenu = false
              // })
              // data.data.bottomList.forEach((obj) => {
              //   obj.isShowTree = false // 给每个对象添加新属性
              //   // 是否显示右键菜单
              //   obj.isShowMenu = false
              // })
              // this.GroupListTop = data.data.topList
              // this.GroupListBottom = data.data.bottomList
              // // this.GroupList = data.data
              // this.loading.groupList = false
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    /**
     * 给桌面端发送未读消息群列表
     */
    sendAllUnreadList(_data) {
      var _unReadIndex = this.unReadList.findIndex((obj) => obj.groupId === _data.groupId)
      if (_unReadIndex == -1) {
        this.unReadList.push(_data)
      } else {
        this.unReadList.splice(_unReadIndex, 1, _data)
      }
      if (window.electron) {
        window.electron.ipcRenderer.send('electron:say', this.unReadList)
      }
    },
    // 定义一个函数来处理群聊信息更新
    updateGroupInfo(_data, groupList) {
      var _index = -1
      var isAdvancedGroup = _data.noticeType === 3
      // 根据群聊类型查找索引
      _index = groupList.findIndex((obj) => (isAdvancedGroup ? obj.groupId === _data.rootId : obj.groupId === _data.groupId))
      if (_index == -1) {
        // 如果群聊不在列表中，根据类型添加到列表
        if (!isAdvancedGroup) {
          groupList.unshift(_data)
        } else {
          console.log('高级群聊通过其他通知事件更新列表')
        }
      } else {
        // 更新现有群聊信息
        if (isAdvancedGroup) {
          this.updateAdvancedGroupInfo(_data, _index, groupList)
        } else {
          this.updateNormalGroupInfo(_data, _index, groupList)
        }
      }
    },
    // 更新高级群聊信息
    updateAdvancedGroupInfo(_data, index, groupList) {
      groupList[index].rootUnreadCount = _data.rootUnreadCount
      // 更新群聊名称和未读消息数
      if (groupList[index].groupId === _data.groupId) {
        if (groupList[index].groupName !== _data.groupName) {
          groupList[index].groupName = _data.groupName
          this.$emit('getGroupInfo')
        }
      }
      // 处理节点信息
      this.handleNodeInfo(_data, index, groupList)

      // 根据未读消息数调整群聊位置
      if (_data.rootUnreadCount > 0) {
        let topData = groupList.splice(index, 1)
        groupList.unshift(topData[0])
      } else if (_data.reSort === 1) {
        let topData = groupList.splice(index, 1)
        groupList.unshift(topData[0])
      }
    },
    // 更新普通群聊信息
    updateNormalGroupInfo(_data, index, groupList) {
      if (groupList[index].groupName !== _data.groupName) {
        groupList[index].groupName = _data.groupName
        this.$emit('getGroupInfo')
      }
      // 根据未读消息数调整群聊位置
      if (_data.unreadCount > 0) {
        groupList.splice(index, 1)
        groupList.unshift(_data)
      } else if (_data.reSort === 1) {
        groupList.splice(index, 1)
        groupList.unshift(_data)
      } else {
        groupList.splice(index, 1, _data)
      }
    },

    // 处理节点信息
    handleNodeInfo(_data, index, groupList) {
      if (this.$refs[groupList[index].groupId] && this.$refs[groupList[index].groupId].length > 0) {
        const node = this.$refs[groupList[index].groupId][0].getNode(_data.groupId)
        if (node) {
          node.data.unreadCount = _data.unreadCount
          if (node.data.groupName !== _data.groupName) {
            node.data.groupName = _data.groupName
            this.$emit('getGroupInfo')
          }
        } else {
          console.log('节点未找到')
        }
      }
    },
    //置顶或者取消置顶之后更新列表
    updateGroupList(_data) {
      if (_data.toTop == 0) {
        this.getGroupList()
        // var _index = this.GroupListTop.findIndex((obj) => obj.groupId === _data.groupId)
        // var _item = this.GroupListTop.splice(_index, 1)
        // _item[0].toTop = _data.toTop
        // this.GroupListBottom.unshift(_item[0])
      } else {
        var _index = this.GroupListBottom.findIndex((obj) => obj.groupId === _data.groupId)
        var _item = this.GroupListBottom.splice(_index, 1)
        _item[0].toTop = _data.toTop
        this.GroupListTop.unshift(_item[0])
      }
    },
    // noDisturb = 0 未开启 1 已开启 消息免打扰功能
    enableDoNotDisturb(e, item) {
      e.stopPropagation()
      item.isShowMenu = !item.isShowMenu
      if (item.isDel == 2) {
        this.$message({
          message: '聊天群已解散',
          type: 'warning',
          duration: 2000,
          onClose: () => {}
        })
        return
      }
      // item.isShowMenu = !item.isShowMenu
      item.noDisturb = item.noDisturb == 0 ? 1 : 0
      var data = [{ groupId: item.groupId, userId: this.uid, type: item.noDisturb }],
        domain = [this.$store.state.DOMAIN],
        path = ['/project/customGroup/groupNoDisturb'],
        dataAxios = this.$tools.getDataAxios(this, domain, path, data)
      Promise.all(dataAxios)
        .then((response) => {
          this.$tools.callbackAxios(this, response, (response) => {
            var data = response[0].data
            if (data.code === 200) {
              if (item.noDisturb == 1) {
                this.$message({
                  message: '设置群聊免打扰成功',
                  type: 'success',
                  duration: 2000,
                  onClose: () => {}
                })
              } else {
                this.$message({
                  message: '取消群聊免打扰',
                  type: 'info',
                  duration: 2000,
                  onClose: () => {}
                })
              }

              if (this.query.groupId) {
                this.$emit('getMoreGroupInfo')
              }
            } else {
              this.$message({
                message: data.message,
                type: 'warning',
                duration: 2000,
                onClose: () => {}
              })
            }
          })
        })
        .catch((error) => {})
    },
    noDisturb(_data) {
      if (_data.toTop == 1) {
        var _index = this.GroupListTop.findIndex((obj) => obj.groupId === _data.groupId)
        var _item = this.GroupListTop[_index]
        _item.noDisturb = _data.noDisturb
      } else {
        var _index = this.GroupListBottom.findIndex((obj) => obj.groupId === _data.groupId)
        var _item = this.GroupListBottom[_index]
        _item.noDisturb = _data.noDisturb
      }
    },
    //处理文字给表情添加字号
    getemojiText(str) {
      const regex =
        /(\uD83D\uDE03|\u270A|\uD83D\uDE04|\uD83D\uDE01|\uD83D\uDE06|\uD83D\uDE05|\uD83E\uDD23|\uD83D\uDE02|\uD83D\uDE42|\uD83D\uDE09|\uD83D\uDE0A|\uD83D\uDE07|\uD83D\uDE15|\uD83D\uDE1F|\uD83D\uDE2E|\uD83D\uDE32|\uD83E\uDD7A|\uD83D\uDE26|\uD83D\uDE28|\uD83D\uDE2D|\uD83D\uDE31|\uD83D\uDE23|\uD83D\uDE1E|\uD83D\uDE29|\uD83D\uDE24|\uD83D\uDE21|\uD83D\uDE20|\uD83D\uDE0D|\uD83D\uDE18|\uD83D\uDE1C|\uD83E\uDD2A|\uD83E\uDD2D|\uD83E\uDD2B|\uD83E\uDD14|\uD83D\uDE11|\uD83D\uDE2A|\uD83D\uDE37|\uD83E\uDD2E|\uD83E\uDD27|\uD83D\uDE35|\uD83D\uDE0E|\uD83D\uDCA9|\uD83E\uDD16|\uD83D\uDE48|\uD83D\uDE49|\uD83D\uDE4A|\uD83D\uDC96|\uD83D\uDC94|\uD83D\uDC8B|\uD83D\uDCAF|\uD83D\uDCA2|\uD83D\uDCA8|\uD83D\uDCA4|\uD83D\uDD90|\uD83D\uDC4C|\uD83E\uDD1F|\uD83E\uDD19|\uD83D\uDC48|\uD83D\uDC49|\uD83D\uDC46|\uD83D\uDC47|\uD83D\uDC4D|\uD83D\uDC4F|\uD83D\uDE4C|\uD83E\uDD1D|\uD83D\uDE4F|\uD83D\uDC44|\uD83C\uDF49|\uD83E\uDDC0|\uD83C\uDF54|\uD83C\uDF5A|\uD83C\uDF75|\uD83C\uDF7A|\uD83C\uDF7B|\uD83E\uDD42)/g
      if (str) {
        str = str.replace(regex, '<em style="font-size:16px">$1</em>')
      }
      return str
    }
  },
  mounted() {
    this.getGroupList()
    this.getAllUnreadList()
    var timer = setInterval(() => {
      if (this.$socket) {
        clearInterval(timer)
        this.$socket.on('custom_group_unread', (data) => {
          var _data = JSON.parse(data)
          _data.isShowMenu = false
          this.sendAllUnreadList(_data)
          // toTop == 1 置顶 0  未置顶

          if (_data.toTop == 1) {
            this.updateGroupInfo(_data, this.GroupListTop)
            // // 判断当前群聊是否是高级群聊
            // if (_data.noticeType == 3) {
            //   var _index = this.GroupListTop.findIndex((obj) => obj.groupId === _data.rootId)
            // } else {
            //   var _index = this.GroupListTop.findIndex((obj) => obj.groupId === _data.groupId)
            // }
            // if (_index == -1) {
            //   if (_data.noticeType != 3) {
            //     this.GroupListTop.unshift(_data)
            //   } else {
            //     console.log('高级群聊')
            //   }
            // } else {
            //   // 判断当前群聊是否是高级群聊
            //   if (_data.noticeType == 3) {
            //     var index = this.GroupListTop.findIndex((obj) => obj.groupId === _data.rootId)
            //     this.GroupListTop[index].rootUnreadCount = _data.rootUnreadCount
            //     if (this.GroupListTop[index].groupId == _data.groupId) {
            //       if (this.GroupListTop[index].groupName != _data.groupName) {
            //         this.GroupListTop[index].groupName = _data.groupName
            //         this.$emit('getGroupInfo')
            //       }
            //     }
            //     if (this.$refs[this.GroupListTop[index].groupId] && this.$refs[this.GroupListTop[index].groupId].length > 0) {
            //       // 通过node-key找到节点
            //       console.log('通过node-key找到节点:', this.$refs[this.GroupListTop[index].groupId])
            //       const node = this.$refs[this.GroupListTop[index].groupId][0].getNode(_data.groupId)
            //       if (node) {
            //         // 如果节点存在，可以进行操作
            //         // console.log(node.data) // 打印节点数据
            //         node.data.unreadCount = _data.unreadCount
            //         if (node.data.groupName != _data.groupName) {
            //           node.data.groupName = _data.groupName
            //           this.$emit('getGroupInfo')
            //         }
            //         // if (window.electron) {
            //         //   window.electron.ipcRenderer.send('electron:say', this.GroupList)
            //         // }
            //       } else {
            //         // 如果节点不存在，可以执行其他操作
            //         console.log('节点未找到')
            //       }
            //     }
            //     if (_data.rootUnreadCount > 0) {
            //       var topData = this.GroupListTop.splice(index, 1)
            //       this.GroupList.unshift(topData[0])
            //       // if (window.electron) {
            //       //   window.electron.ipcRenderer.send('electron:say', this.GroupList)
            //       // }
            //     } else {
            //       if (_data.reSort == 1) {
            //         var topData = this.GroupListTop.splice(index, 1)
            //         this.GroupListTop.unshift(topData[0])
            //       } else {
            //         this.GroupListTop.splice(_index, 1, _data)
            //       }
            //     }
            //     // this.GroupList[_index].unreadCount = _data.unreadCount
            //   } else {
            //     if (this.GroupListTop[_index].groupName != _data.groupName) {
            //       this.$emit('getGroupInfo')
            //     }
            //     if (_data.unreadCount > 0) {
            //       this.GroupListTop.splice(_index, 1)
            //       this.GroupListTop.unshift(_data)
            //     } else {
            //       if (_data.reSort == 1) {
            //         this.GroupListTop.splice(_index, 1)
            //         this.GroupListTop.unshift(_data)
            //       } else {
            //         this.GroupListTop.splice(_index, 1, _data)
            //       }
            //     }
            //   }
            // }
          } else {
            this.updateGroupInfo(_data, this.GroupListBottom)
            // // 判断当前群聊是否是高级群聊
            // if (_data.noticeType == 3) {
            //   var _index = this.GroupListBottom.findIndex((obj) => obj.groupId === _data.rootId)
            // } else {
            //   var _index = this.GroupListBottom.findIndex((obj) => obj.groupId === _data.groupId)
            // }
            // if (_index == -1) {
            //   if (_data.noticeType != 3) {
            //     this.GroupListBottom.unshift(_data)
            //   } else {
            //     console.log('高级群聊')
            //   }
            // } else {
            //   // 判断当前群聊是否是高级群聊
            //   if (_data.noticeType == 3) {
            //     var index = this.GroupListBottom.findIndex((obj) => obj.groupId === _data.rootId)
            //     this.GroupListBottom[index].rootUnreadCount = _data.rootUnreadCount
            //     if (this.GroupListBottom[index].groupId == _data.groupId) {
            //       if (this.GroupListBottom[index].groupName != _data.groupName) {
            //         this.GroupListBottom[index].groupName = _data.groupName
            //         this.$emit('getGroupInfo')
            //       }
            //     }
            //     if (this.$refs[this.GroupListBottom[index].groupId] && this.$refs[this.GroupListBottom[index].groupId].length > 0) {
            //       // 通过node-key找到节点
            //       console.log('通过node-key找到节点:', this.$refs[this.GroupListBottom[index].groupId])
            //       const node = this.$refs[this.GroupListBottom[index].groupId][0].getNode(_data.groupId)
            //       if (node) {
            //         // 如果节点存在，可以进行操作
            //         // console.log(node.data) // 打印节点数据
            //         node.data.unreadCount = _data.unreadCount
            //         if (node.data.groupName != _data.groupName) {
            //           node.data.groupName = _data.groupName
            //           this.$emit('getGroupInfo')
            //         }
            //       } else {
            //         // 如果节点不存在，可以执行其他操作
            //         console.log('节点未找到')
            //       }
            //     }
            //     if (_data.rootUnreadCount > 0) {
            //       var topData = this.GroupListBottom.splice(index, 1)
            //       this.GroupListBottom.unshift(topData[0])
            //       // }
            //     } else {
            //       if (_data.reSort == 1) {
            //         var topData = this.GroupListBottom.splice(index, 1)
            //         this.GroupListBottom.unshift(topData[0])
            //       } else {
            //         this.GroupListBottom.splice(_index, 1, _data)
            //       }
            //     }
            //     // this.GroupList[_index].unreadCount = _data.unreadCount
            //   } else {
            //     if (this.GroupListBottom[_index].groupName != _data.groupName) {
            //       this.$emit('getGroupInfo')
            //     }
            //     if (_data.unreadCount > 0) {
            //       this.GroupListBottom.splice(_index, 1)
            //       this.GroupListBottom.unshift(_data)
            //     } else {
            //       if (_data.reSort == 1) {
            //         this.GroupListBottom.splice(_index, 1)
            //         this.GroupListBottom.unshift(_data)
            //       } else {
            //         this.GroupListBottom.splice(_index, 1, _data)
            //       }
            //     }
            //   }
            // }
          }
        })
        this.$socket.on('delete_custom_group', (data) => {
          var _data = JSON.parse(data)
          this.deleteCustomGroup(_data)
        })
        this.$socket.on('senior_group_change', (data) => {
          // var _data = JSON.parse(data)
          this.getGroupList()
        })
        this.$socket.on('custom_group_totop', (data) => {
          var _data = JSON.parse(data)
          this.updateGroupList(_data)
        })
        this.$socket.on('custom_group_noDisturb', (data) => {
          var _data = JSON.parse(data)
          this.noDisturb(_data)
        })
      }
    }, 10)
    if (window.electron) {
      window.electron.ipcRenderer.on('electron:read', (_, args) => {
        // console.log('relay===============', args)
        this.$socket.emit('leaveGroup', 'group-' + this.query.groupId)
        this.$router.push('/main/#/pc?tab=chat&groupId=' + args.groupId)
        this.$socket.emit('joinGroup', 'group-' + args.groupId)
        //获取通知权限 需要有交互才有提示
      })
      // window.electron.ipcRenderer.on('electron:isFocus', (_, args) => {
      //   // console.log('isFocus===============', args)
      //   if (args) {
      //     this.$socket.emit('joinGroup', 'group-' + this.query.groupId)
      //   } else {
      //     this.$socket.emit('leaveGroup', 'group-' + this.query.groupId)
      //   }
      // })
    }
    $(document).on('click contextmenu', () => {
      this.GroupListTop.forEach((item) => {
        item.isShowMenu = false
      })
      this.GroupListBottom.forEach((item) => {
        item.isShowMenu = false
      })

      // }
    })
  }
}
</script>
<style scoped>
.dt-chat-groups {
  flex: 1;
}
.dt-groups-loading {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
.dt-groups-loading span {
  font-size: 12px;
  color: #909399;
  margin-left: 5px;
}
.dt-groups-title i:hover {
  color: #2f54eb;
}
/* 添加单一群聊弹窗样式 */
.dt-add-group >>> .el-dialog__footer {
  border-top: 1px solid #ecf0f8;
  padding: 14px 20px;
}
.dt-add-group >>> .el-dialog__body {
  padding-top: 10px;
  padding-bottom: 0px;
}
.dt-add-group >>> .el-textarea {
  padding-bottom: 20px;
  border: 1px solid #dcdfe6;
}
.dt-add-group >>> .el-textarea__inner {
  border: none;
  resize: none;
}
.dt-add-group >>> .el-input__count {
  right: 5px;
  bottom: 3px;
  background: none;
}
.dt-add-group >>> .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label::after {
  content: '*';
  color: #f56c6c;
  margin-left: 4px;
}
.dt-add-group >>> .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before {
  content: '';
  color: #f56c6c;
  margin-right: 0px;
}
.dt-group-tip {
  margin: 2px 0px 0px 8px;
  font-size: 12px;
  color: #606262;
}
/* 添加单一群聊弹窗样式 */
/* 群聊列表样式 */
.dt-list-items {
  position: relative;
}
/* 右键菜单样式 */
.contextMenu {
  width: 120px;
  /* height: 72px; */
  background: #ffffff;
  border: 1px solid;
  border-color: #e9eef7;
  border-radius: 4px;
  box-shadow: 0px 2px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  box-sizing: border-box;
  padding: 4px 1px;
  position: absolute;
}
.contextMenu div {
  height: 31px;
  /* text-align: center; */
  line-height: 31px;
  padding-left: 16px;
}
.contextMenu div:hover {
  background: #f0f5ff;
}
/* 右键菜单样式 */
.dt-list-item {
  height: 38px;
  padding: 11px 16px;
  display: flex;
  cursor: pointer;
  position: relative;
}
/* 置顶的头像样式 */
.dt-list-item-topicon {
  position: absolute;
  top: 30px;
  left: 38px;
  margin-right: 0px !important;
}
.dt-list-item:hover {
  background-color: #f5f8ff;
}
.dt-list-item.on {
  background-color: #f0f5ff;
}
.dt-list-item img {
  margin-right: 8px;
}
.dt-item-des {
  margin-top: 2px;
  flex: 1;
}
.dt-des-chatname {
  display: flex;
  justify-content: space-between;
  margin-bottom: 5px;
}
.dt-des-chatname span {
  color: #1f1f1f;
  display: block;
  width: 109px;
  overflow: hidden;
  text-overflow: ellipsis;
  height: 16px;
  white-space: nowrap;
}
.dt-des-chatname i {
  font-size: 11px;
  color: rgb(192, 196, 204);
  white-space: nowrap;
}
.dt-des-chattip {
  display: flex;
  justify-content: space-between;
}
.dt-des-chattip .dt-des-markdup {
  font-size: 12px;
  color: #909399;
  width: 130px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  /* height: 15px; */
}
.dt-des-chattip em {
  font-size: 10px;
  color: #fff;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  background-color: #ff4d4f;
}
.dt-chat-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
}
/* 群聊列表样式 */
/* 高级群聊列表样式 */
.dt-list-item-gj {
  height: 60px;
  padding: 11px 16px;
  display: flex;
  cursor: pointer;
  align-items: center;
  background-color: #fffaf0;
  box-sizing: border-box;
  position: relative;
}
.dt-list-item-gj img {
  margin-right: 8px;
}
.dt-list-item-gj-name {
  flex: 1;
  /* line-height: 20px; */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dt-list-item-gj-unreadCount em {
  font-size: 10px;
  color: #fff;
  width: 18px;
  height: 18px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px;
  background-color: #ff4d4f;
  display: inline-block;
}
.dt-list-gj-content {
  /* width: 280px; */
  overflow: auto;
}
::v-deep .custom-tree-node {
  color: #1f1f1f;
}
::v-deep .custom-tree-node[disabled='disabled'] {
  color: #909399;
  cursor: not-allowed;
}
::v-deep .custom-tree-node {
  display: flex;
  justify-content: space-between;
  flex: 1;
  padding-right: 16px;
  align-items: center;
  /* height: 100%;
  line-height: 36px; */
}
/* ::v-deep .custom-tree-node :hover {
  background-color: #f5f7fa;
} */
.dt-list-gj-content >>> .el-tree-node__content {
  height: 36px;
}
.dt-list-gj-content >>> .el-tree-node__children {
  overflow: visible;
}

/* 选择包含至少一个 .custom-tree-node 子元素的父元素 */
.dt-list-gj-content >>> .el-tree-node__content:has(.custom-tree-node[disabled='disabled']) {
  /* 应用样式 */
  cursor: not-allowed;
}
/* .dt-list-gj-content >>> .el-tree-node__content::-webkit-scrollbar {
  display: none;
}
.dt-list-gj-content >>> .el-tree-node__content {
  scrollbar-width: none;
  -ms-overflow-style: none;
} */
/* .dt-list-gj-content >>> .el-tree div[aria-expanded='true'] .el-tree-node__content {
  background-color: red;
} */
/* .dt-list-gj-content >>> .el-tree {
  overflow: auto;
} */
/* .dt-list-gj-content >>> .el-tree-node__children {
  overflow: auto;
} */

/* 高级群聊列表样式 */

/* ---------------群规则start---------------- */
.upload-box {
  display: flex;
  align-items: center;
}
.upload-box .btn {
  width: 96px;
  height: 32px;
  border: 1px solid;
  border-radius: 4px;
  margin-right: 4px;
  padding-top: 8px;
  line-height: 1;
  box-sizing: border-box;
  font-family: Microsoft YaHei;
  border: 1px solid #dcdfe6;
  color: #606266;
  font-size: 12px;
}
.upload-box .hasFile {
  color: #c0c4cc;
  border: 1px solid #f2f3f5;
}
.upload-box .btn i {
  margin-right: 6px;
}

.upload-box .tip {
  line-height: 21px;
  font-family: MicrosoftYaHei;
  color: #909399;
  font-size: 12px;
}

.upload-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 28px;
  border-radius: 4px;
  padding: 6px 8px;
  box-sizing: border-box;
  margin-top: 8px;
}

.upload-info:hover {
  background: #f0f5ff;
}

.upload-info .name {
  font-family: MicrosoftYaHei;
  color: #1f1f1f;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 350px;
}

.upload-info .name img {
  width: 10px;
  height: 12px;
  margin-right: 4px;
}

.upload-info .btn {
  font-family: MicrosoftYaHei;
  color: #2f54eb;
  font-size: 12px;
  text-align: right;
  cursor: pointer;
}
/* ---------------群规则end---------------- */
</style>
